<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>精灵物体</title>
  </head>
  <body>
    <script type="module">
      // 引入three.js
      import * as THREE from "three";
      import { scene, camera, renderer, controls } from "/src/utils/init2d.js";
      //引入2d渲染器
      import { CSS2DObject } from "three/addons/renderers/CSS2DRenderer.js";

      // 区别
      // CSS3D:始终不面向摄像机，场景缩放时跟随着变大/变小，不被模型遮挡，通过DOM事件点击
      // CSS2D:始终面向摄像机，  场景缩放时不跟随变化，     不被模型遮挡，通过DOM事件点击
      // 精灵体：始终面向摄像机， 场景缩放时跟随着变大/变小，被模型遮挡，通过光射投影交互
      // 平面体：始终不面向摄像机， 场景缩放时跟随着变大/变小，被模型遮挡，通过光射投影交互

      // 创建地面
      function createFloor() {
        camera.position.set(5, 5, 5);
        // 1.创建平面缓冲几何体
        const geometry = new THREE.PlaneGeometry(10, 10);
        const material = new THREE.MeshStandardMaterial({
          color: 0xffffff,
          side: THREE.DoubleSide,
        });
        const plane = new THREE.Mesh(geometry, material);
        plane.receiveShadow = true;
        plane.rotation.set(-Math.PI / 2, 0, 0);
        scene.add(plane);
      }

      // 创建小球
      let sphere;
      function createSphere() {
        const geometry = new THREE.SphereGeometry(1, 32, 16);
        const material = new THREE.MeshStandardMaterial({
          color: 0x00ff00,
        });
        sphere = new THREE.Mesh(geometry, material);
        sphere.position.set(0, 1, 0);
        sphere.castShadow = true;
        scene.add(sphere);
      }

      // 创建光源
      let directionLightHelper; // 平行光辅助对象
      function createLight() {
        //平行光
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(3, 3, 3);
        directionalLight.castShadow = true;
        directionalLight.target = sphere; // 让平行光指向小球
        scene.add(directionalLight);

        // 平行光辅助对象
        directionLightHelper = new THREE.DirectionalLightHelper(
          directionalLight,
          1
        );
        scene.add(directionLightHelper);
      }

      // 创建2d物体
      function create2d() {
        const div = document.createElement("div");
        div.innerHTML = "球体";
        div.style.color = "red";
        // 与CSS3D区别：2D物体 px 像素单位还可以生效，而不是平移到三维空间中的单位
        div.style.fontSize = "32px";
        const object2d = new CSS2DObject(div);
        object2d.position.set(0, 3, 0);
        scene.add(object2d);
      }

      // 创建精灵物体
      function createSprite() {
        // 1. 准备纹理对象并加载图片素材
        const texture = new THREE.TextureLoader().load("/src/assets/精灵3.png");
        // 2. 使用 SpriteMaterial 精灵材质
        const material = new THREE.SpriteMaterial({ map: texture });
        // 3. 使用 Sprite 创建精灵物体并加入场景
        const sprite = new THREE.Sprite(material);
        sprite.position.set(3, 0.5, -3);
        scene.add(sprite);
      }

      camera.position.set(5, 5, 5);
      renderer.shadowMap.enabled = true;

      createFloor();
      createSphere();
      createLight();
      create2d();
      createSprite();
    </script>
  </body>
</html>
